<template>
	<view class="container">
		<view class="list-item">
			<text class="k">{{t('index.application-language')}}:</text>
			<text class="v">{{applicationLocale}}</text>
		</view>
		<view class="locale-setting">{{t('index.language')}}</view>
		<view class="locale-list">
			<view class="locale-item" v-for="(item, index) in localesList" :key="index" @click="onLocaleChange(item)">
				<text class="text">{{item.text}}</text>
				<text class="icon-check" v-if="item.code == applicationLocale"></text>
			</view>
		</view>
		<foo-bar @changeNav="changeNav" :selectNav="selectNav"></foo-bar>
	</view>
</template>

<script setup lang="ts">
	// 底部菜单组件
	import fooBar from '@/components/fooBar.vue'

	// t 用于本地化字符串，locale 用于设置语言
	const { t, locale } = useI18n();

	// 是否是安卓
	const isAndroid = ref<boolean>(false)
	// 选中的语言
	const applicationLocale = ref<string>('')

	export interface LocalesList {
		text : string,
		code : string
	}

	// 语言列表
	const localesList = computed(() => [{
		text: t('locale.auto'),
		code: 'auto'
	}, {
		text: t('locale.en'),
		code: 'en'
	},
	{
		text: t('locale.zh'),
		code: 'zh'
	},
	])

	// 底部菜单选中项
	const selectNav = ref<number>(0)

	onMounted(() => {
		let systemInfo = uni.getSystemInfoSync();
		applicationLocale.value = uni.getLocale();
		isAndroid.value = systemInfo.platform.toLowerCase() === 'android';
		uni.onLocaleChange((e) => {
			applicationLocale.value = e.locale as string | '';
		})
	})

	/**
	 * @description 切换底部菜单
	 * @param {number} index 底部菜单索引
	 */
	const changeNav = (index : number) => {
		selectNav.value = index
	}

	/**
	 * @description 切换语言
	 * @param {LocalesList} e 语言对象
	 */
	const onLocaleChange = (e : LocalesList) => {
		if (isAndroid.value) {
			uni.showModal({
				content: t('index.language-change-confirm'),
				success: (res) => {
					if (res.confirm) {
						uni.setLocale(e.code);
					}
				}
			})
		} else {
			uni.setLocale(e.code);
			locale.value = e.code;
		}
	}
</script>

<style>
	.title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
	}

	.description {
		font-size: 14px;
		opacity: 0.6;
		margin-bottom: 15px;
	}

	.detail-link {
		font-size: 14px;
		word-break: break-all;
	}

	.link {
		color: #007AFF;
		margin-left: 10px;
	}

	.locale-setting {
		font-size: 16px;
		font-weight: bold;
		margin-top: 25px;
		margin-bottom: 5px;
		padding-bottom: 5px;
		border-bottom: 1px solid #f0f0f0;
	}

	.list-item {
		font-size: 14px;
		padding: 10px 0;
	}

	.list-item .v {
		margin-left: 5px;
	}

	.locale-item {
		display: flex;
		flex-direction: row;
		padding: 10px 0;
	}

	.locale-item .text {
		flex: 1;
	}

	.icon-check {
		margin-right: 5px;
		border: 2px solid #007aff;
		border-left: 0;
		border-top: 0;
		height: 12px;
		width: 6px;
		transform-origin: center;
		/* #ifndef APP-NVUE */
		transition: all 0.3s;
		/* #endif */
		transform: rotate(45deg);
	}
</style>